<template>
  <div class="liveSetting">
    <div class="top">
      <h2>直播设置</h2>
      <h3 style="padding: 0.5rem 0 0.3rem 0">直播标题</h3>
      <input type="text" class="titleInput" placeholder="请输入直播标题" v-model="title">
      <h3 style="padding: 0.5rem 0 0.3rem 0">直播简介</h3>
      <textarea class="introduce" placeholder="请输入直播简介" v-model="introduce"></textarea>
    </div>
    <div class="bottom">
      <h3 style="padding-bottom: 0.3rem">观看条件设置</h3>
      <div style="position: relative">
        <select ref="select" class="limit" @change="selected">
          <option value="nolimit" selected="selected">观看无限制</option>
          <option value="codelimit">验证码观看</option>
        </select>
        <span style="position: absolute; right: 0.5rem;top: 0.6rem">
          <img src="~@/assets/more_hig.png">
        </span>
      </div>
      <div class="code" v-if="showCode">
        <div class="codeInput" @click="refreshCode">{{ code }}&nbsp;<span style="font-size: 0.5rem">点击刷新观看验证码</span></div>
      </div>
      <h3 style="padding: 0.5rem 0 0.15rem 0">
        观看地址
        <button type="button" class="share" @click="share">分享</button>
      </h3>
      <div class="address">
        <a :href="url" style="color: #9B9B9B;text-decoration: none;font-size: 0.64rem;display:block;word-break: break-all;">{{url}}</a>
      </div>
      <div class="buttons">
        <button type="button" class="save" @click="saveSetting" v-show="showSaveBtn">保存设置</button>
        <button type="button" class="start" @click="startLiving">开启直播</button>
      </div>
    </div>
    <transition name="fade">
    <div class="cover" v-show="modal">
      <div class="shareModal">
        <div class="header">
          <h2>分享</h2>
          <img src="~@/assets/close_hig.png" @click="closeShare">
        </div>
        <div class="content">
          <h3>直播标题</h3>
          <p style="padding: 0.03rem 0 0.5rem;word-wrap: break-word">{{ title }}</p>
          <h3>直播简介</h3>
          <p style="padding-top: 0.03rem;max-height: 6.5rem">{{ introduce }}</p>
          <h3 style="padding-top: 0.5rem">观看地址</h3>
          <p style="padding: 0.03rem 0 0.5rem;color: #9B9B9B;">{{ url }}</p>
          <div v-show="showCode">
            <h3>验证码</h3>
            <p style="padding: 0.03rem 0 0.6rem">{{ code }}</p>
          </div>
        </div>
        <div class="footer">
          <button style="border: 0.05rem solid white" v-clipboard:copy="copyContent" v-clipboard:success="copyShare">点击复制</button>
        </div>
      </div>
    </div>
    </transition>
  </div>
</template>

<script>

export default {
  data: function () {
    return {
      baseURL: '',
      sn: '',
      ip: '',
      title: '',
      introduce: '',
      code: '',
      url: '',
      index: 0,
      modal: false,
      token: '',
      dimension: {},
      originalInfo: {
        codeStatus: false,
        code: '',
        title: '',
        introduce: ''
      }
    }
  },
  computed: {
    showSaveBtn: function () {
      return this.title !== this.originalInfo.title || this.introduce !== this.originalInfo.introduce || this.originalInfo.codeStatus !== false || this.code !== this.originalInfo.code
    },
    showCode: function () {
      if (this.index === 0) {
        return false
      } else {
        return true
      }
    },
    copyContent: function () {
      if (this.index === 1) {
        return '标题:' + this.title + '——简介:' + this.introduce + '——直播地址:' + this.url + '——验证码:' + this.code
      }
      return '标题:' + this.title + '——简介:' + this.introduce + '——直播地址:' + this.url
    }
  },
  methods: {
    selected (value) {
      this.originalInfo.codeStatus = !this.originalInfo.codeStatus
      this.selectLiveMode()
    },
    share () {
      this.modal = true
    },
    closeShare () {
      this.modal = false
    },
    copyShare () {
      this.$lMessage({
        message: '已复制直播信息',
        time: 1200
      })
    },
    refreshCode () {
      this.$http.post(this.baseURL + '/mhlivemgr/live/code').then(res => {
        if (res.data.ret === 0) {
          this.code = res.data.data.liveCode
        }
      })
    },
    saveSetting () {
      this.$http.post(this.baseURL + '/mhlivemgr/live/create', {
        liveInfo: {
          liveTitle: this.title,
          liveDetail: this.introduce,
          liveUrl: this.url.split('&')[0],
          liveCode: this.index === 0 ? '' : this.code
        }}).then(res => {
          if (res.data.ret === 0) {
            this.$lMessage({
              message: '保存成功！',
              time: 1200
            })
          // 初始化状态
            this.originalInfo.codeStatus = false
            this.originalInfo.title = this.title
            this.originalInfo.introduce = this.introduce
            this.originalInfo.code = this.code
          } else {
            this.$lMessage({
              message: '保存失败！',
              time: 1200
            })
          }
        }).catch(() => {
          this.$lMessage({
            message: '服务异常，保存失败！',
            time: 1200
          })
        })
    },
    startLiving () {
      this.$http.post(this.baseURL + '/mhlivemgr/live/ctrl', {
        opCode: 'start',
        dimension: this.dimension
      }).then(res => {
        if (res.data.ret === 0) {
          this.$lMessage({
            message: '开启成功！',
            time: 1200
          })
        } else {
          this.$lMessage({
            message: '开启失败！',
            time: 1200
          })
        }
      }).catch(() => {
        this.$lMessage({
          message: '服务异常，开启失败！',
          time: 1200
        })
      })
    },
    selectLiveMode () {
      this.index = this.$refs.select.selectedIndex
      if (this.$refs.select.selectedIndex === 1) {
        if (this.code === '') {
          this.refreshCode()
        }
      }
    }
  },
  created () {
    let infoArr = this.$route.params.info.split('&')
    this.sn = infoArr[0]
    this.ip = infoArr[1]
    if (this.ip) {
      this.baseURL = 'http://' + this.ip
    } else {
      this.baseURL = 'http://mxcloud.meetsoon.net'
    }
    // this.sn = '5a4f1a75ab9b7531481fa9c36125ef1c'

    this.$http.post(this.baseURL + '/mhlivemgr/live/fetch', {
      device: {
        id: this.sn
      }
    }).then(res => {
      if (res.data.ret === 0) {
        let info = res.data.data.liveInfo

        if (this.ip) {
          this.url = info.liveUrl + '&' + this.ip
        } else {
          this.url = info.liveUrl
        }

        if (res.data.data.retType === 'watch') {
          window.location.replace(this.url)
        }

        this.token = res.data.data.token
        this.dimension = res.data.data.dimension
        this.title = info.liveTitle
        this.introduce = info.liveDetail
        this.code = info.liveCode

        this.index = info.liveCode === '' ? 0 : 1
        this.$refs.select.selectedIndex = this.index
        this.$http.defaults.headers.common['Authorization'] = this.token

        this.originalInfo.title = info.liveTitle
        this.originalInfo.introduce = info.liveDetail
        this.originalInfo.code = info.liveCode
      }
    }).catch(() => {
      this.$lMessage({
        message: '服务异常，获取直播信息失败！',
        time: 1200
      })
    })
  },
  mounted () {
    this.selectLiveMode()
  }
}
</script>

<style scoped>
/*transition淡入淡出动画*/
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s
}
.fade-enter, .fade-leave-to {
  opacity: 0
}
select {
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
padding-left: 0.5rem;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }
h1,h2,h3,h4,h5,h6,p {
  padding: 0;
  margin: 0;
}
h2 {
  font-size: 1.2rem;
}
h3 {
  font-size: 0.9rem;
}
p {
  font-size: 0.7rem;
  word-wrap: break-word;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: rgba(255,255,255,0.5);
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: rgba(255,255,255,0.5);
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: rgba(255,255,255,0.5);
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: rgba(255,255,255,0.5);
}
.liveSetting {
  background: linear-gradient(#4481EB, #04BEFE) no-repeat;
  background-size: 100% 20.25rem;
}
.top {
  padding: 0.5rem 0.75rem 0rem;
  height: 20rem;
  color: white;
  background: url(~@/assets/bg.jpg) no-repeat 0 bottom;
  background-size: contain;
}
.top .titleInput {
  border: 0.05rem solid white;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  height: 2rem;
  width: 100%;
  padding: 0.4rem;
  box-sizing: border-box;
  background-color:transparent;
  color: white;
}
.top .introduce {
  padding: 0.25rem 0;
  border: 0.05rem solid white;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  width: 100%;
  height: 9.2rem;
  padding: 0.4rem;
  box-sizing: border-box;
  background-color:transparent;
  color: white;
}
.bottom {
  padding: 0 0.75rem;
}
.bottom .limit {
  border: 0.05rem solid #E4E4E4;
  width: 100%;
  font-size: 0.75rem;
  height: 2rem;
  background: transparent;
}
.bottom .code {
  width: 100%;
  margin-top: 0.25rem;
}
.code .codeInput {
  border: 0.05rem solid #E4E4E4;
  border-radius: 0.25rem;
  font-size: 0.9rem;
  text-align: center;
  height: 1.75rem;
  line-height: 1.75rem;
  width: 100%;
  background-color: #EEE;
}
.code .refresh {
  width: 30%;
  height: 1.95rem;
  font-size: 0.8rem;
  background-image: linear-gradient(0deg, #04BEFE 0%, #4481EB 100%);
  border-radius: 0.2rem;
  border: 0.05rem solid #1CA8F7;
  color: white;
  float: right;
}
.share {
  font-size: 0.5rem;
  height: 1.25rem;
  width: 2.5rem;
  background-image: linear-gradient(0deg, #04BEFE 0%, #4481EB 100%);
  border: 0.05rem solid white;
  border-radius: 3.7rem;
  color: white;
  float: right; 
}
.buttons {
  width: 100%;
  height: 4.25rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.buttons .save {
  width: 6.5rem;
  font-size: 0.8rem;
  border-radius: 3.7rem;
  height: 2.25rem;
  border: 0.05rem solid #1CA8F7;
  float: left;
  background: white;
}
.buttons .start {
  width: 6.5rem;
  font-size: 0.8rem;
  border: 0.05rem solid white;
  border-radius: 3.7rem;
  height: 2.25rem;
  float: right;
  background-image: linear-gradient(0deg, #04BEFE 0%, #4481EB 100%);
  color: white;
}
/*模态框*/
.cover {  
  position: fixed;
  left: 0;    
  top: 0;
  width:100%;
  height:100%;
  z-index: 10;
  background-color: rgba(1,1,1,0.6); 
}
.shareModal {
  width: 90%;
  max-height: 24rem;
  margin: 1.5rem auto;
  background-color: white;
  border-radius: 0.75rem;
}
.shareModal .header {
  padding: 0.8rem;
  background: #2D97F2;
  border-top-right-radius: 0.65rem;
  border-top-left-radius: 0.65rem;
  color: white;
  position: relative;
}
.header img {
  position: absolute; 
  right: 1rem;
  top: 1.1rem;
}

.shareModal .content {
  padding: 0.75rem 0.75rem 0 0.75rem;
}
.shareModal .footer {
  text-align: center;
  padding-bottom: 1rem;
}
.footer button {
  color: white;
  font-size: 0.8rem;
  padding: 0.5rem 2.5rem;
  background-image: linear-gradient(0deg, #04BEFE 0%, #4481EB 100%);
  border-radius: 3.5rem;
}
</style>
